import React, { useEffect, useState } from "react";
import fs from 'fs';
import withMemo from "../../../utils/componentWithMemo";
import { ipcRenderer } from "electron";
import { downloadFilesByUrl } from "../../../utils/tools";
import { getFileName } from "../../../utils/message-input-util";
import { Progress } from "tea-component";

const VideoElemLoad = (props: any): JSX.Element => {
    const {video_elem_image_path }=props;
    const [percent, setPercent] = useState(0);
    let imgSrc = ""
    if(video_elem_image_path&&fs.existsSync(video_elem_image_path)){
        const sbuf = fs.readFileSync(video_elem_image_path);//读取文件，并将缓存区进行转换
        const sbolb = new Blob([sbuf]);//转为一个新的Blob文件流
        imgSrc = URL.createObjectURL(sbolb);
    }
    useEffect(() => {
        //console.log(video_elem_video_path)
        const timer = setInterval(
            () => setPercent(percent => (percent % 100) + 10),
            200
        );
        return ()=>{
            clearInterval(timer);
        }
    }, [video_elem_image_path])    //这里props变化时需要执行的操作，否则可能出问题
    
    return(
        <div style={{position:"relative"}}>
            <img src={imgSrc} style={{ maxWidth: '250px',zIndex:1}} /> 
            <div  style={{width:"100%", position:"absolute",bottom:"0",left:"0",zIndex:2}}>
                <Progress type="circle" theme="default" width={100} percent={percent}  text=" " />
            </div>
        </div>
    )
}
export const  VideoLoad= withMemo(VideoElemLoad);

const VideoElem = (props: any): JSX.Element => {
    let{video_elem_image_size,video_elem_image_width,video_elem_image_url,video_elem_video_url,video_elem_image_path,video_elem_video_path}=props;
    //let imgSrc = ""
    // console.log(props)
    const [vidSrc,setvidSrc]=useState(video_elem_video_url);
    
    const listener = async (event, params) => {
        const fileName =getFileName(video_elem_video_url);
        const {file_path} = params;
        if(file_path.includes(fileName)){
            // if(isNew) {
            //     await aesFileDecry(file_path);
            //     await sleep(500); //连续加密多图时会报错
            // }
            const buf = fs.readFileSync(file_path);
            const bolb = new Blob([buf]);
            setvidSrc(URL.createObjectURL(bolb));
        }
    }
    useEffect(() => {
        //console.log(video_elem_video_path)
        if(video_elem_video_path&&fs.existsSync(video_elem_video_path) ){
            const vbuf = fs.readFileSync(video_elem_video_path);
            const vbolb = new Blob([vbuf]);
            setvidSrc(URL.createObjectURL(vbolb))
        }else  if(video_elem_video_path=== video_elem_video_url){
            ipcRenderer.on("DOWNLOADFILE_CALLBACK", listener);
            downloadFilesByUrl(video_elem_video_url,true) 
        }
        return ()=>{
            ipcRenderer.off("DOWNLOADFILE_CALLBACK", listener)
        }
    }, [video_elem_video_path])    //这里props变化时需要执行的操作，否则可能出问题
    
    return (
        <div className="message-view__item--text text right-menu-item" >
            <video muted={true}  src={vidSrc}  id={video_elem_image_size}  style={{ maxWidth: '250px'}} controls width={video_elem_image_width}>
            </video>
        </div>
    )
};
const isEuqre = (prevProps, curProps) =>{
    return prevProps.video_elem_video_path == curProps.video_elem_video_path;
}
export default  React.memo(VideoElem,isEuqre);